<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			
			.redColor{
				color:red
			}
			
			.fSize{
				font-size: 20px;
			}
			
			.bgColor{
				background-color: #666;
			}
			
			
		</style>
	</head>
	<body>
		<div id="app">
			<div class="redColor fSize bgColor">
				<h3>hello world</h3>
			</div>
			<div style="color: green;font-size: 25px;background-color: lightblue;">
				<h3>hello world</h3>
			</div>
			
			<h1>1. Vue 类名绑定</h1>
			<div :class="{redColor:true,fSize:true,bgColor:bgEnable}">
				<h3>hello world</h3>
			</div>
			
			<div :class="['redColor','fSize','bgColor']">
				<h3>hello world</h3>
			</div>
			
			<div :class="myStyle">
				<h3>hello world</h3>
			</div>
			
			
			<h1>2. Vue 行内样式绑定</h1>
			<p>font-size ->  fontSize</p>
			<div :style="{color: 'green',fontSize: '25px'}">
				<h3>hello world</h3>
			</div>
			<div :style="{color: 'green',fontSize: fSize}">
				<h3>hello world</h3>
			</div>
			<div :style="[yellowColor,fSize2]">
				<h3>hello world</h3>
			</div>
			
			<h1>3 实例</h1>
			<span :class="{redColor:isactive==0}" @click="active(0)">首页</span>&nbsp;
			<span :class="{redColor:isactive==1}" @click="active(1)">公司简介</span>&nbsp;
			<span :class="{redColor:isactive==2}" @click="active(2)">产品介绍</span>&nbsp;
			<span :class="{redColor:isactive==3}" @click="active(3)">联系我们</span>&nbsp;
		</div>

		<script>
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三",
						bgEnable:false,
						myStyle:['redColor','fSize','bgColor'],
						fSize:'40px',
						yellowColor:{
							color:"yellow"
						},
						fSize2: {
							fontSize:'15px',
						},
						isactive:0,
					}
				},
				methods: {
					active(i) {
						this.isactive = i;
					}
				},
			})
			vm.mount("#app");
		</script>
	</body>
</html>
